<template>
  <div id="bigPage">
    <div id="tip">主页 > 商品列表</div>
    <p id="abscissa">商品列表显示</p>
    <form action="../" id="form">
      <ul>
        <li id="gid">
          商品ID：<input
            type="text"
            placeholder="请输入ID"
            name="gid"
            v-model="gid"
            @keydown.enter="get(gid, gname, state)"
          />
        </li>
        <li id="gname">
          名称：<input
            type="text"
            placeholder="请输入商品名称"
            name="uname"
            v-model="gname"
            @keydown.enter="get(gid, gname, state)"
          />
        </li>
        <li id="gtype">
          状态：
          <select
            name="state"
            id=""
            v-model="state"
            @keydown.enter="get(gid, gname, state)"
          >
            <option value="999">选择商品状态</option>
            <option value="1">在售</option>
            <option value="0">已售</option>
          </select>
        </li>
        <li id="get" @click="get(gid, gname, state)">查找</li>
        <li id="del" @click="del">删除</li>
      </ul>
      <table cellspacing="0" id="table">
        <tr>
          <td><input type="checkbox" v-model="all" @click="ALL" /></td>
          <td class="id">商品ID</td>
          <td class="name">名称</td>
          <td class="type">类别</td>
          <td class="price">价格</td>
          <td class="date">出售时间</td>
          <td class="state">状态</td>
          <td class="set">操作</td>
        </tr>
        <tr v-for="data in pagedata" :key="data.id">
          <td>
            <input
              type="checkbox"
              name="choose"
              v-model="choose"
              :value="data.gid"
            />
          </td>
          <td class="id">{{ data.gid }}</td>
          <td class="name">
            {{ data.gname.slice(0, 5) }}{{ data.gname.length > 5 ? "..." : "" }}
          </td>
          <td class="type">{{ data.gtype }}</td>
          <td class="price">￥ {{ data.price }}</td>
          <td class="date">{{ data.date }}</td>
          <td class="state" :style="Moods(data.state)">
            {{ data.state == 1 ? "在售" : "已售" }}
          </td>
          <td class="set">
            <span id="look" @click="lookAsGid(data)">查看</span>
            <span id="updata" @click="updataAsGid(data)">修改</span>
          </td>
        </tr>
      </table>
    </form>
    <p id="pageButton">
      <button class="page" @click="PageTop">上一页</button>
      {{ this.page }} / {{ Math.ceil(listdata.length / 10) }}
      <button class="page" @click="PageBottom">下一页</button>
    </p>
    <router-view
      :gid="gid"
      :gname="gname"
      :state="state"
      @get="get"
    ></router-view>
  </div>
</template>
  
<script>
import axios from "axios";
import VueCookies from "vue-cookies";
import router from "../router";

export default {
  router: router,
  mounted() {
    // 生命钩子，挂载完毕时调用
    // console.log("生命钩子");
    this.get(0, "", 999);
  },
  computed: {
    //用来计算目前的页数的数据
    pagedata: {
      get() {
        // console.log(this.listdata);
        return this.listdata.slice(
          (this.page - 1) * 9 + (this.page - 1),
          this.page * 9 + this.page
        );
        // return "";
      },
    },
  },
  watch: {
    choose: {
      handler(newValue, oldValue) {
        if (newValue.length == this.pagedata.length) {
          this.all = true;
        } else {
          this.all = false;
        }
      },
    },
  },
  methods: {
    Moods(state) {
      // 返回style对象，对类型颜色改变
      return state == "0" ? { color: "red" } : { color: "blue" };
    },
    get(gid, gname, state) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // console.log(gid);
        // console.log(gname);
        // console.log(state);
        // 获取查询信息
        this.gid = "";
        this.gname = "";
        this.state = 999;
        if (gid == "") {
          gid = 0;
        } // 后端gid是int不能接''
        // console.log(gid,gname,state);
        // 发送异步请求获取用户信息
        axios({
          method: "POST",
          url: "http://localhost:8081/lo/intercept/goods/getgoodsasconditions",
          params: {
            uid: this.uid,
            ucookie: VueCookies.get("ucookie"),
            gid: gid, // 搜索条件的id
            gname: gname.trim(),
            state: state,
          },
          headers: {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          },
        }).then(
          (response) => {
            // console.log(response.data);
            // 直接将信息展示
            this.listdata = response.data;
            this.page = this.listdata.length == 0 ? 0 : 1;
          },
          (error) => {
            alert("请求失败,请检查服务器是否开启！");
          }
        );
      }
    },
    del() {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        if (confirm("确定删除？")) {
          // 删除对应的信息
          // console.log("删除的id：" + this.choose);
          // 处理choose
          var chooseUrl = "";
          for (var i = 0; i < this.choose.length; i++) {
            if (i == 0) {
              chooseUrl += this.choose[i];
            } else {
              chooseUrl += "&choose=" + this.choose[i];
            }
          }
          // console.log(chooseUrl);
          axios({
            method: "POST",
            url: "http://localhost:8081/lo/intercept/goods/deletegoods",
            params: {
              uid: this.uid,
              ucookie: VueCookies.get("ucookie"),
              choose: chooseUrl,
            },
            headers: {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            },
          }).then(
            (response) => {
              // console.log(response.data);
              // 直接将信息展示
              this.listdata = response.data;
              // 删完恢复choose
              this.choose = [];
            },
            (error) => {
              alert("请求失败,请检查服务器是否开启！");
            }
          );
        }
      }
    },
    ALL() {
      if (this.all) {
        this.choose = [];
        // console.log(this.choose);
      } else {
        // 先清空，再添加
        this.choose = [];
        for (var i = 0; i < this.pagedata.length; i++) {
          this.choose.push(this.pagedata[i].gid);
        }
        // console.log(this.choose);
      }
    },
    lookAsGid(datas) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // console.log(datas);
        // 跳转到发布路由组件
        router.replace({
          name: "Lookmydetailed",
          // 当page页面需要tips信息去渲染，就传，前其他不用传tips
          params: {
            datas: datas,
            returnOne:'Goods',//指定返回的页面
          },
        });
      }
    },
    updataAsGid(datas) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // 跳转到发布路由组件
        router.replace({
          name: "Updatamydetailed",
          // 当page页面需要tips信息去渲染，就传，前其他不用传tips
          params: {
            datas: datas,
          },
        });
      }
    },
    PageTop() {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // console.log(1);
        if (this.page > 1) {
          this.page -= 1;
          this.choose = [];
        } else {
          alert("最前一页！");
        }
      }
    },
    PageBottom() {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        if (this.page < Math.ceil(this.listdata.length / 10)) {
          this.page += 1;
          this.choose = [];
        } else {
          alert("最后一页！");
        }
      }
    },
  },
  data() {
    return {
      gid: 0, // 为0时表示没有指定gid
      gname: "",
      state: 999, // 999表示没有选
      all: 0,
      choose: [],
      listdata: [
        // {
        //   gid: "1",
        //   gname: "台灯",
        //   gtype: "电器日用",
        //   price: "50.00",
        //   date: "2022-11-27",
        //   state: "0",
        // },
        // {
        //   gid: "2",
        //   gname: "台灯2",
        //   gtype: "电器日用",
        //   price: "50.00",
        //   date: "2022-11-27",
        //   state: "1",
        // },
        // {
        //   gid: "3",
        //   gname: "台灯3",
        //   gtype: "电器日用",
        //   price: "50.00",
        //   date: "2022-11-27",
        //   state: "0",
        // },
        // {
        //   gid: "4",
        //   gname: "台灯4",
        //   gtype: "电器日用",
        //   price: "50.00",
        //   date: "2022-11-27",
        //   state: "1",
        // },
      ],
      page: 0, // 表示当前页面
    };
  },
};
</script>
  
  <style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_four.ttf") format("truetype");
}
* {
  list-style-type: none;
  font-family: "iconfont" !important;
}
#bigPage {
  width: 75%;
  height: 900px;
  position: absolute;
  top: 70px;
  left: 21%;
  background-color: #eee;
}
#bigPage #tip {
  width: 100%;
  height: 30px;
  background-color: #fff;

  line-height: 30px;
}

#bigPage #tip::before {
  content: "\f012b";
  padding-left: 20px;
  padding-right: 10px;
}

#bigPage #abscissa {
  text-align: center;
  font-size: 30px;
  color: #72787c;
  margin-top: 10px;
}

#form {
  margin-left: 5%;
}

#form li {
  display: inline-block;
}

#form #gid {
  margin-left: 30px;
  margin-right: 20px;
}

#form #gname {
  margin-right: 20px;
}

#form #get {
  width: 45px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 100px;
  background-color: #5cb85c;
  color: #fff;
  border: 0px;
  cursor: pointer; /* 经过有手指*/
}

#form #del {
  width: 45px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 30px;
  background-color: #d9534f;
  color: #fff;
  border: 0px;
  cursor: pointer; /* 经过有手指*/
}

#form th {
  border: 0px;
}

#form td {
  border: 1px solid #000;
}

#table {
  width: 86%;
  text-align: center;
  margin-left: 3%;
  margin-top: 30px;
}
#table td {
  height: 40px;
}

#table .set {
  width: 22%;
}
#table .set span {
  display: inline-block;
  width: 50px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  cursor: pointer; /* 经过有手指*/
}
#table .set #look {
  margin-right: 20px;
  background-color: #337ab7;
}

#table .set #updata {
  background-color: #5bc0de;
}

#pageButton {
  display: inline-block;
  margin-left: 39%;
  text-align: center;
  font-size: 20px;
}

#pageButton .page {
  width: 80px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer; /* 经过有手指*/
}

#pageButton .page:hover {
  background-color: #5bc0de;
}
</style>